<template>
  <div id="gaonenghaohangye"></div>
</template>

<script>
// import echarts from "echarts";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import shenzhenJson from "../../../public/json/shenzhen.json";
require("echarts/theme/macarons"); // echarts theme
import echarsData from "../../../public/json/echarsData.json";
export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    tabIndexVal: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    tabIndexVal(val, oldVal) {
      console.log(val, oldVal, this);
      if (val == 1) {
        this.createLine();
      } else if (val == 2) {
        this.createLine2();
      } else if (val == 3) {
        this.createMap();
      } else if (val == 4) {
        this.createMap();
      }
    },
  },
  mounted() {
    this.createLine();
  },
  methods: {
    createLine() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      var chartDom = document.getElementById("gaonenghaohangye");
      this.myChart = echarts.init(chartDom);
      var option;
      let gaohaonenghangyebaobiao = echarsData.gaohaonenghangyebaobiao;

      var legend = [];
      var years = [];

      for (const key in gaohaonenghangyebaobiao.hangye) {
        legend.push(gaohaonenghangyebaobiao.hangye[key]);
      }

      for (const key in gaohaonenghangyebaobiao.series) {
        years.push(key);
      }

      option = {
        title: {
          text: "电力行业",
          subtext: "发电总量趋势",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        grid: {
          left: "5%",
          right: "0%",
          bottom: "6%",
        },
        color: [
          "#5ad8a6",
          "#f6bd16",
          //"#e8684a",
          "#5470c6",
          "#87ba76",
          "#fac858",
          //"#ea7c71",
          "#f1ab60",
          "#1ab8c2",
          "#418dd3",
        ],
        xAxis: {
          type: "category",
          data: years,
          boundaryGap: false,

          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#fff"],
              opacity: 0.1,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },

        series: [
          {
            data: [820, 932, 901, 934, 1290],
            type: "line",
            smooth: true,
          },
        ],
      };

      option && this.myChart.setOption(option);
    },
    createLine2() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      let gaohaonenghangyebaobiao = echarsData.gaohaonenghangyebaobiao;
      var chartDom = document.getElementById("gaonenghaohangye");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "电力行业",
          subtext: "发电总量占比趋势",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        color: [
          "#5ad8a6",
          "#f6bd16",
          //"#e8684a",
          "#5470c6",
          "#87ba76",
          "#fac858",
          //"#ea7c71",
          "#f1ab60",
          "#1ab8c2",
          "#418dd3",
        ],
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var total = 0;

            for (var i = 0; i < params.length; i++) {
              total += params[i].data;
            }

            var res_array = [];
            res_array[0] = "";
            for (var j = 0; j < params.length; j++) {
              var temp = params[j];
              res_array[0] = temp.axisValue;
              res_array.push(
                temp.seriesName +
                  ":" +
                  ((parseInt(temp.data) * 100) / total).toFixed(2) +
                  "%"
              );
            }
            return res_array.join("<br/>");
          },
        },
        legend: {
          show: true,
          data: ["核电", "燃煤", "燃气", "垃圾发电", "光伏发电"],
          textStyle: {
            fontSize: 14, //字体大小
            color: "#fff", //字体颜色
          },
          orient: "vertical",
          left: "center",
          bottom: "bottom",
        },
        grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2016年", "2017年", "2018年", "2019年", "2020年"],
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#fff"],
              opacity: 0.1,
            },
          },
        },
        series: [
          {
            name: "核电",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "燃煤",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "燃气",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "垃圾发电",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "光伏发电",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    createMap() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      let zhongdianyongneng = echarsData.zhongdianyongneng;
      var myChart = echarts.init(document.getElementById("gaonenghaohangye"));
      echarts.registerMap("深圳", shenzhenJson);

      var yearArr = ["数量"];
      var yearIndex = 0;
      var selectedRange = null;
      var option = null;
      var str = "";
      var data = [];
      var geoCoordMap = {};

      var mapFeatures = echarts.getMap("深圳").geoJson.features;
      mapFeatures.forEach(function (v, index) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
        data.push({
          name: name,
          value: [
            {
              name: "数量",
              value: zhongdianyongneng.rawData[index][1],
            },
          ],
        });
      });

      function convertMapDta(year, data) {
        var mapData = [];
        data.forEach(function (v) {
          v.value.forEach(function (v1) {
            if (String(v1.name) === String(year)) {
              mapData.push({
                name: v.name,
                value: v1.value,
              });
            }
          });
        });
        return mapData;
      }

      var qy_data = [
        {
          name: "深圳市能源环保有限公司",
          p: [113.848551, 22.827011],
        },
        {
          name: "深圳妈湾电力有限公司",
          p: [113.878393, 22.476104],
        },
        {
          name: "华润电力（海丰）有限公司",
          p: [114.6835, 22.7395],
        },
        {
          name: "深圳南天电力有限公司",
          p: [114.003297, 22.545901],
        },
        {
          name: "深圳市广前电力有限公司",
          p: [113.869651, 22.509765],
        },
        {
          name: "深圳钰湖电力有限公司",
          p: [114.140492, 22.713677],
        },
        {
          name: "深圳大唐宝昌燃气发电有限公司",
          p: [114.034055, 22.708922],
        },
        {
          name: "岭东核电有限公司",
          p: [114.553508, 22.599035],
        },
        {
          name: "中海油深圳电力有限公司",
          p: [114.495095, 22.5552],
        },
        {
          name: "深圳能源集团股份有限公司",
          p: [114.448203, 22.569266],
        },
        {
          name: "深圳南山热电股份有限公司",
          p: [113.896734, 22.507536],
        },
        {
          name: "深圳新电力实业有限公司",
          p: [113.871887, 22.501098],
        },
        {
          name: "深圳市天楹环保能源有限公司",
          p: [114.10245, 22.681777],
        },
        {
          name: "深圳广业环保再生能源有限公司",
          p: [114.100954, 22.683708],
        },
        {
          name: "岭澳核电有限公司",
          p: [114.553508, 22.599035],
        },
        {
          name: "广东核电合营有限公司",
          p: [114.553508, 22.599035],
        },
      ];

      function convertData(mapChart, count, areaName) {
        var geo = mapChart.getModel().getComponent("geo").coordinateSystem;

        var region = geo.getRegion(areaName);
        var rect = region.getBoundingRect();
        var geoCoordMap = [];
        for (var i = 0; i < count; i++) {
          var coord = [Infinity, Infinity];
          while (!region.contain(coord)) {
            coord[0] = rect.x + Math.random() * rect.width;
            coord[1] = rect.y + Math.random() * rect.height;
          }
          const itemName = "s" + i;
          geoCoordMap.push({
            name: itemName,
            value: [coord[0], coord[1], count],
          });

          // console.log(geoCoordMap);
        }
        return geoCoordMap;
      }

      function addPie(chart, data) {
        var op = chart.getOption();
        var sd = option.series;
        for (let index = 0; index < qy_data.length; index++) {
          const element = qy_data[index];
          sd.push({
            name: "scatter_" + element.name + "企业数",
            type: "scatter",
            symbolSize: 5,
            coordinateSystem: "geo",
            data: [
              {
                name: element.name,
                value: [element.p[0], element.p[1], 1],
              },
            ],
            label: {
              formatter: "{b}",
              position: "right",
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
              itemStyle:{color:'#fff' },
          });
        }

        return sd;
      }

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "电力行业",
          subtext: "电力企业分布",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            //console.log(params)
            if ((params.componentSubType = "scatter")) {
              return params.data.name;
            }
            if (params.value) {
              return (
                params.name + "<br/>" + yearArr[yearIndex] + ": " + params.value
              );
            }
          },
        },
        geo: {
          map: "深圳",
          //center: geoCoordMap[areaName], //当前视角的中心点，用经纬度表示  这个搭配放大 可开始就定位
          //zoom: 1, //当前视角的缩放比例。
          roam: false,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
        },
        visualMap: {
          min: 0,
          max: 120,
          right: "2%",
          top: "bottom",
          seriesIndex: 0,
          text: ["高", "低"],
          calculable: true,
          color: [
            "#5ad8a6",
            "#f6bd16",
           // "#e8684a",
            "#5470c6",
            "#87ba76",
            "#fac858",
           //"#ea7c71",
            "#f1ab60",
            "#1ab8c2",
            "#418dd3",
          ],
        },
        series: [
          {
            name: "chinaMap",
            type: "map",
            mapType: "深圳",
            roam: false,
            // roam: true,
            label: {
              position: "top",
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#eee",
              },
            },
            data: convertMapDta(yearArr[yearIndex], data),
            /*zlevel:3*/
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }

      addPie(myChart, data);
      // console.log("===========option=================");
      // console.log(option);
      myChart.setOption(option, true);
    },
    createDianLi() {
      let dianlihangye = echarsData.dianlihangye;
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      var l_series = [];

      for (let index = 0; index < dianlihangye.legend.length; index++) {
        var legend_name = dianlihangye.legend[index];

        var temp_series = [];
        for (var key_year in dianlihangye.xAxis) {
          var year_name = dianlihangye.xAxis[key_year];
          if (index == 0) {
            temp_series.push(dianlihangye.series[legend_name][year_name]["fz"]);
          } else {
            temp_series.push(dianlihangye.series[legend_name][year_name]["yz"]);
          }
        }
        l_series.push({
          name: legend_name,
          type: "line",
          stack: "总量" + index,
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: temp_series,
        });
      }

      option = {
        color: [
          "#5ad8a6",
          "#f6bd16",
          //"#e8684a",
          "#5470c6",
          "#87ba76",
          "#fac858",
          //"#ea7c71",
          "#f1ab60",
          "#1ab8c2",
          "#418dd3",
        ],
        title: {
          text: "电力行业发电与用电对比",
          //subtext: "深圳节能在线",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter(params) {
            var fadianserie = params[0];
            var yongdianserie = params[1];

            var seriesName0 = "";
            var seriesName1 = "";
            var axisValue0 = "";
            var axisValue1 = "";
            if (fadianserie.seriesName == "全市发电量") {
              seriesName0 = fadianserie.seriesName;
              seriesName1 = yongdianserie.seriesName;
              axisValue0 = fadianserie.axisValue;
              axisValue1 = yongdianserie.axisValue;
            } else {
              seriesName1 = fadianserie.seriesName;
              seriesName0 = yongdianserie.seriesName;
              axisValue1 = fadianserie.axisValue;
              axisValue0 = yongdianserie.axisValue;
            }

            var fadian_data = dianlihangye.series[seriesName0][axisValue0];

            var yongdian_data = dianlihangye.series[seriesName1][axisValue1];
            // console.log(fadian_data, yongdian_data);
            var res =
              "发电 <br/>&nbsp;火电:" +
              fadian_data.flz +
              "<br/>&nbsp;核电:" +
              fadian_data.fhz +
              "<br/>用电 <br/>&nbsp;火电:" +
              yongdian_data.ylz +
              "<br/>&nbsp;核电:" +
              yongdian_data.yhz;

            return res;
          },
        },
        legend: {
          textStyle: {
            fontSize: 14, //字体大小
            color: "#cdcdcd", //字体颜色
          },
          data: dianlihangye.legend,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "#cdcdcd",
              },
            },
            data: dianlihangye.xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: '#fff',
                opacity:0.1
              },
            },
          },
        ],
        series: l_series,
      };

      option && myChart.setOption(option);
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  // methods: {
  //   initChart() {
  //     this.chart = echarts.init(this.$el, "macarons");
  //     this.setOptions(this.chartData);
  //   },
  //   setOptions({ expectedData, actualData } = {}) {
  //     this.chart.setOption({
  //       tooltip: {
  //         trigger: "item",
  //         formatter: "{a} <br/>{b} : {c} ({d}%)"
  //       },
  //       legend: {
  //         show: false
  //       },
  //       // toolbox: {
  //       //   show : true,
  //       //   feature : {
  //       //     mark : {show: true},
  //       //     dataView : {show: true, readOnly: false},
  //       //     magicType : {
  //       //         show: true,
  //       //         type: ['pie', 'funnel']
  //       //     },
  //       //     restore : {show: true},
  //       //     saveAsImage : {show: true}
  //       //   }
  //       // },
  //       calculable: true,
  //       color: ["#f6c359", "#5ca2ee", "#9c43af", "#8ac48b"],
  //       series: [
  //         {
  //           name: "面积模式",
  //           type: "pie",
  //           radius: [30, 150],
  //           center: ["50%", "70%"],
  //           roseType: "area",
  //           data: [
  //             { value: 40, name: "股票期权" },
  //             { value: 15, name: "限制性股票" },
  //             { value: 25, name: "限制性股票单位" },
  //             { value: 25, name: "股票增值权" }
  //           ]
  //         }
  //       ]
  //     });
  //   }
  // }
};
</script>
<style>
/* #main {
  height: 100%;
} */
</style>
